import React, { Component } from "react"
import { connect } from "dva"
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Input,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Radio,
  Badge,
  Select
} from "antd"
import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from "react-konva"
import OrderForm from "./hdForms/OrderForm.js"
import ProdBoardDataForm from "./hdForms/ProdBoardDataForm.js"
import CircleState from "./CircleState.js"

@connect(({ produce }) => ({ produce }))
class TwoBoxesHandImage extends React.Component {
  constructor(props) {
    super(props)
  }
  state = {
    image: null
  }
  componentDidMount() {
    this._isMounted = true
    const image = new window.Image()
    image.src = this.props.produce.handTwoBoxesSrc
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image
        })
      }
    }
  }

  componentWillUpdate() {
    const image = new window.Image()
    image.src = this.props.produce.handTwoBoxesSrc
    image.onload = () => {
      this.setState({
        image: image
      })
    }
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return
    }
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    )
  }
}

// 做首板的时候弹出来的切线图
@connect(({ produce }) => ({ produce }))
class CutLineImage extends React.Component {
  constructor(props) {
    super(props)
  }
  state = {
    image: null
  }
  componentDidMount() {
    this._isMounted = true
    const image = new window.Image()
    image.src = this.props.produce.cutLineSrc
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image
        })
      }
    }
  }

  componentWillUpdate() {
    const image = new window.Image()
    image.src = this.props.produce.cutLineSrc
    image.onload = () => {
      this.setState({
        image: image
      })
    }
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return
    }
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    )
  }
}

@connect(({ produce }) => ({ produce }))
class TotalBoardImage extends React.Component {
  constructor(props) {
    super(props)
  }
  state = {
    image: null
  }
  componentDidMount() {
    this._isMounted = true
    const image = new window.Image()
    image.src = this.props.produce.totalBoardSrc
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image
        })
      }
    }
  }

  componentWillUpdate() {
    const image = new window.Image()
    image.src = this.props.produce.totalBoardSrc
    image.onload = () => {
      this.setState({
        image: image
      })
    }
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return
    }
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    )
  }
}

@connect(({ produce }) => ({ produce }))
class CutterCamCalImage extends React.Component {
  constructor(props) {
    super(props)
  }
  state = {
    image: null
  }

  componentDidMount() {
    const image = new window.Image()
    image.src = this.props.produce.cutterImageSrc
    image.onload = () => {
      this.setState({
        image: image
      })
    }
  }

  componentWillUpdate() {
    const image = new window.Image()
    image.src = this.props.produce.cutterImageSrc
    image.onload = () => {
      this.setState({
        image: image
      })
    }
  }

  render() {
    return <Image image={this.state.image} width={1000} height={1000} />
  }
}

class HandLabel extends React.Component {
  state = {
    x: this.props.x,
    y: this.props.y,
    name: this.props.name
  }

  onDragMove = (e) => {
    this.setState({
      x: e.target.attrs.x,
      y: e.target.attrs.y
    })
    this.props.callBack(e.target.attrs.x, e.target.attrs.y)
  }

  render() {
    const { x, y, name } = this.state
    return (
      <Label
        x={this.props.x}
        y={this.props.y}
        opacity={0.75} // 透明度
        draggable
        onDragMove={this.onDragMove}
      >
        <Tag
          fill="black"
          pointerDirection="down"
          pointerWidth={10}
          pointerHeight={10}
          lineJoin="round"
          shadowColor="black"
          shadowBlur={10}
          shadowOffset={10}
          shadowOpacity={0.5}
        />
        <Text
          text={name + "  " + x + "  " + y}
          fontFamily="Microsoft YaHei"
          fontSize={18}
          padding={5}
          fill="white"
        />
      </Label>
    )
  }
}

class PLable extends React.Component {
  state = {
    x: this.props.x,
    y: this.props.y,
    name: this.props.name
  }

  onDragMove = (e) => {
    this.setState({
      x: e.target.attrs.x,
      y: e.target.attrs.y
    })
    this.props.callBack(e.target.attrs.x, e.target.attrs.y)
  }

  render() {
    const { x, y, name } = this.state
    return (
      <Label
        x={this.props.x}
        y={this.props.y}
        opacity={0.75} // 透明度
        draggable
        onDragMove={this.onDragMove}
      >
        <Tag
          fill="black"
          pointerDirection="up"
          pointerWidth={10}
          pointerHeight={10}
          lineJoin="round"
          shadowColor="black"
          shadowBlur={10}
          shadowOffset={10}
          shadowOpacity={0.5}
        />
        <Text
          text={name + "  " + x + "  " + y}
          fontFamily="Microsoft YaHei"
          fontSize={18}
          padding={5}
          fill="white"
        />
      </Label>
    )
  }
}

@connect(({ ds, os, produce }) => ({ ds, os, produce }))
@Form.create()
class Produce extends Component {
  state = {
    btnName: "暂停上料",
    searchId: 0, // 搜索框的搜索id号
    cutTopEdge: 15, // 第一刀留边宽度
    cutLeftEdge: 15, // 第二刀留边宽度
    cutBottomEdge: 15, // 第三刀留边宽度
    cutRightEdge: 15, // 第四刀留边宽度
    widthAdjustValue: 0, // 人工标注尺寸的时候,宽度调整阈值
    heightAdjustValue: 0, // 人工标注尺寸的手,高度调整阈值
    p7: { name: "左上角", x: 30, y: 30 },
    p8: { name: "内框旋转,向下顺时针,向上逆时针", x: 300, y: 300 },
    innerBoardAngle: 0, //内板尺寸标注的角度
    p1: { name: "上板左上角", x: 50, y: 100 },
    p2: { name: "上板旋转,向右顺时针", x: 250, y: 250 },
    p3: { name: "下板左上角", x: 50, y: 700 },
    p4: { name: "下板旋转,向右顺时针", x: 250, y: 750 },
    p5: { name: "下板左上角", x: 50, y: 900 },
    p6: { name: "下板旋转,向右顺时针", x: 250, y: 1050 },
    upAngle: 0, // 上板旋转角度
    downAngle: 0, // 下板旋转角度
    groundAngle: 0
  }

  componentDidMount() {
    const { dispatch } = this.props
    window.eel.createWebSocketConnection(dispatch)
  }

  componentDidUpdate(prevProps) {
    const { dispatch } = this.props
    const { workingOrder } = this.props.os

    // 检查 workingOrder 是否发生变化
    if (workingOrder !== prevProps.os.workingOrder) {
      console.log("监控到workingOrder的值发生了变化")
      // 更新 state 中的相关值
      this.setState({
        cutTopEdge: workingOrder[0]?.top_edge ?? this.state.cutTopEdge,
        cutLeftEdge: workingOrder[0]?.left_edge ?? this.state.cutLeftEdge,
        cutBottomEdge: workingOrder[0]?.bottom_edge ?? this.state.cutBottomEdge,
        cutRightEdge: workingOrder[0]?.right_edge ?? this.state.cutRightEdge
      })
    }
  }

  resetCutAmount = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/resetProdData",
      payload: "cut_amount"
    })
  }

  resetCutLife = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/resetProdData",
      payload: "knife_used"
    })
  }

  resetTableLife = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/resetProdData",
      payload: "table_start_day"
    })
  }

  cutterBeginCheckPass = (e) => {
    const { dispatch } = this.props
    this.closeCutterCheckModal()
    dispatch({
      type: "produce/cutterBeginCheckPass"
    })
  }

  disableCalcImage = () => {
    const { dispatch } = this.props
    const { btnName } = this.state
    if (btnName == "暂停上料") {
      this.setState({
        btnName: "打开上料"
      })
      dispatch({
        type: "produce/disableCalcImage",
        payload: false
      })
    } else {
      this.setState({
        btnName: "暂停上料"
      })
      dispatch({
        type: "produce/disableCalcImage",
        payload: true
      })
    }
  }

  reCalcFirstBoard = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/reCalcFirstBoard"
    })
  }
  // 搜索下拉框的值改变的时候searchId会跟着变.
  onChange = (key, e) => {
    this.setState({
      searchId: e.props.children
    })
  }

  changeOrder = (e) => {
    const { dispatch } = this.props
    const { workingOrder } = this.props.os
    this.setState({
      cutTopEdge: workingOrder[0].top_edge,
      cutLeftEdge: workingOrder[0].left_edge,
      cutBottomEdge: workingOrder[0].bottom_edge,
      cutRightEdge: workingOrder[0].right_edge
    })
    dispatch({
      type: "produce/clickChangeOrder",
      payload: workingOrder[0]
    })
  }

  handLabelTwoBoxes = (e) => {
    const { dispatch } = this.props
    const { p1, p3, upAngle, downAngle } = this.state
    dispatch({
      type: "produce/clearLabelTwoBoxesModalState"
    })
    dispatch({
      type: "produce/handLabelTwoBoxes",
      payload: {
        upBoxInfo: [[p1.x, p1.y], -upAngle], // opencv中顺时针是负数,角度
        downBoxInfo: [[p3.x, p3.y], -downAngle] // opencv中顺时针是负数,角度
      }
    })
    this.setState({ p1: { ...p1, x: 50, y: 100 } })
  }

  handLabelThreel = () => {
    const { dispatch } = this.props
    const { p1, p3, p5, upAngle, downAngle, groundAngle } = this.state
    this.closeVisionCheckThree()
    dispatch({
      type: "produce/handLabelThree",
      payload: {
        up_box_info: [[p1.x, p1.y], -upAngle], // opencv中顺时针是负数,角度
        down_box_info: [[p3.x, p3.y], -downAngle], // opencv中顺时针是负数,角度
        ground_box_info: [[p5.x, p5.y], -groundAngle]
      }
    })
  }
  closeVisionCheckThree = () => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closevisionCheckThree"
    })
  }

  closeCutterCheckModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closeCutterCheckModal"
    })
  }

  cutterFinalCutBoard = (e) => {
    this.closeCutterCheckModal()
    const { dispatch } = this.props
    dispatch({
      type: "produce/cutterFinalCutBoard"
    })
  }

  cutterFinalCheckAgain = (e) => {
    const { dispatch } = this.props
    this.closeCutterCheckModal()
    dispatch({
      type: "produce/cutterFinalCheckAgain"
    })
  }

  cutterBeginCheckAgain = (e) => {
    const { dispatch } = this.props
    this.closeCutterCheckModal()
    dispatch({
      type: "produce/cutterBeginCheckAgain"
    })
  }

  reHandLabelTwoBoxes = (e) => {
    const { dispatch } = this.props
    this.colseCutLineModal()
    dispatch({
      type: "produce/reHandLabelTwoBoxes"
    })
  }

  colseCutLineModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/colseCutLineModal"
    })
  }

  clickCutBoard = (e) => {
    const { dispatch } = this.props
    const { cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge } = this.state
    this.closeTotalModal()
    dispatch({
      type: "produce/clickCutBoard",
      payload: [cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge]
    })
  }

  changeWidthValue = (value) => {
    const { dispatch } = this.props
    this.setState({
      widthAdjustValue: value
    })
  }

  changeHeightValue = (value) => {
    const { dispatch } = this.props
    this.setState({
      heightAdjustValue: value
    })
  }

  onAfterSizeChange = () => {
    const { widthAdjustValue, heightAdjustValue } = this.state
    const { dispatch } = this.props
    dispatch({
      type: "produce/adjustHandBoardSize",
      payload: [widthAdjustValue, heightAdjustValue]
    })
  }
  // 两个框的时候调整了标注尺寸
  onAfterSizeChangeTwoBox = (e) => {
    const { widthAdjustValue, heightAdjustValue } = this.state
    const { dispatch } = this.props
    dispatch({
      type: "produce/adjustHandBoardSizeTwoBox",
      payload: [widthAdjustValue, heightAdjustValue]
    })
  }

  clickResetCutterSelf = (e) => {
    const { dispatch } = this.props
    this.closeCutterCheckModal()
    this.closeMainAlarmInfoModal()
    dispatch({
      type: "produce/clickResetCutterSelf"
    })
  }

  closeMainAlarmInfoModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/closeMainAlarmInfoModal"
    })
  }

  closeResetModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closeResetModal"
    })
  }

  // 界面上点击了总复位按钮
  clickResetAll = (e) => {
    const { dispatch } = this.props
    const { btnResetAllClicked } = this.props.produce
    this.closeMainAlarmInfoModal()
    if (!btnResetAllClicked) {
      dispatch({
        type: "produce/updateResetAllBtnClick",
        payload: true
      })
      dispatch({
        type: "produce/clickResetAll"
      })
    }
  }

  // 测试新功能
  testNewFunction = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/testNewFunction"
    })
  }

  // 点击历史记录的逻辑
  clickHistory = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "os/clickHistory"
    })
  }

  // 点击搜索之后的逻辑
  clickSearch = (e) => {
    const { dispatch } = this.props
    const { searchId } = this.state
    dispatch({
      type: "os/searchOrder",
      payload: searchId
    })
  }

  // 搜索下拉框的值改变的时候searchId会跟着变.
  onOfflineRadioChange = (e) => {
    const { dispatch } = this.props
    if (e.target.value == "start") {
      this.offlineStart()
    } else {
      this.offlineStop()
    }
  }

  // 离线上料启动
  offlineStart = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineStart"
    })
  }

  offlineStop = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineStop"
    })
  }

  offlineReset = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineReset"
    })
  }

  offlineSwitchThrowBoard = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineSwitchThrowBoard"
    })
  }

  offlineAllowCatchBoard = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineAllowCatchBoard"
    })
  }

  offlineAllowTakeBoard = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineAllowTakeBoard"
    })
  }

  offlinePutBoardFinish = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlinePutBoardFinish"
    })
  }

  offlineHandPutBoardConfirm = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineHandPutBoardConfirm"
    })
  }

  offlineCarIsInPlace = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "ds/offlineCarIsInPlace"
    })
  }

  clickStartProduce = (e) => {
    const { dispatch } = this.props
    const { btnStartClicked } = this.props.produce
    const { workingOrder } = this.props.os
    if (!btnStartClicked) {
      dispatch({
        type: "produce/updateStartProduceBtn",
        payload: true
      })

      this.setState({
        cutTopEdge: workingOrder[0].top_edge,
        cutLeftEdge: workingOrder[0].left_edge,
        cutBottomEdge: workingOrder[0].bottom_edge,
        cutRightEdge: workingOrder[0].right_edge
      })
      dispatch({
        type: "produce/clickStartProduce",
        payload: workingOrder[0]
      })
    }
  }

  closeTotalModal = () => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closeTotalModal"
    })
  }

  clickStopProduce = (e) => {
    const { dispatch } = this.props
    this.closeTotalModal()
    dispatch({
      type: "produce/clickStopProduce"
    })
  }

  boardBack = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/boardBack"
    })
  }

  reGetImageProduce = (e) => {
    const { dispatch } = this.props
    this.closeTotalModal()
    dispatch({
      type: "produce/reGetImageProduce"
    })
  }

  totalBoardIsOk = (e) => {
    const { dispatch } = this.props
    this.closeTotalModal()
    dispatch({
      type: "produce/totalBoardIsOk"
    })
  }

  clearBoardSizeCheckModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/clearBoardSizeCheckModal"
    })
  }

  nextBoardRes = (e) => {
    const { dispatch } = this.props
    this.clearBoardSizeCheckModal()
    dispatch({
      type: "produce/nextBoardRes"
    })
  }

  lastBoardRes = (e) => {
    const { dispatch } = this.props
    this.clearBoardSizeCheckModal()
    dispatch({
      type: "produce/lastBoardRes"
    })
  }

  keepOkSize = (e) => {
    const { dispatch } = this.props
    this.clearBoardSizeCheckModal()
    dispatch({
      type: "produce/keepOkSize"
    })
  }

  handInnerBoardSize = (e) => {
    const { dispatch } = this.props
    this.clearBoardSizeCheckModal()
    dispatch({
      type: "produce/handInnerBoardSize"
    })
  }

  clearHandBoardSizeState = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/clearHandBoardSizeState"
    })
  }

  // 标注尺寸确认OK
  handInnerBoardSizeIsOk = (e) => {
    const { dispatch } = this.props
    const { p7, innerBoardAngle } = this.state
    // 把调整的尺寸归0
    this.setState({
      widthAdjustValue: 0,
      heightAdjustValue: 0
    })
    this.clearHandBoardSizeState()
    dispatch({
      type: "produce/handInnerBoardSizeIsOk",
      payload: [[p7.x, p7.y], -innerBoardAngle]
    })
  }

  onAfterEdgeChange = (e) => {
    const { cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge } = this.state
    const { dispatch } = this.props
    const { isReturned } = this.props.produce
    if (isReturned) {
      dispatch({
        type: "produce/waitReturn",
        payload: false
      })
      dispatch({
        type: "produce/getCutLinesAfterEdgeChange",
        payload: [cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge]
      })
    }
  }

  closeErrorInfoModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closeErrorInfoModal"
    })
  }

  closeProduceStartModal = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closeProduceStartModal"
    })
  }
  openCutterFinalCheckDir = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/openCutterFinalCheckDir"
    })
  }
  openCutterFinalResDir = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/openCutterFinalResDir"
    })
  }

  closeDisplayStatus = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/closeDisplayStatus"
    })
  }
  handDisplayStatus = (e) => {
    const { dispatch } = this.props
    this.closeDisplayStatus()
    dispatch({
      type: "produce/handDisplayStatus"
    })
  }
  offlineModeBoard = (e) => {
    const { dispatch } = this.props
    dispatch({
      type: "produce/offlineModeBoard"
    })
  }

  render() {
    const gridStyle = {
      width: "20%",
      textAlign: "left"
    }
    const gridStyle2 = {
      width: "40%",
      textAlign: "left"
    }

    const {
      prodBoardData,
      workingInfo,
      errorInfo,
      errorInfoModalVisble,
      totalBoardSrc, // 展示totalBoardSrc的原图
      totalBoardErrorModalVisible, // totalBoardError提示框是否显示
      totalBoardErrorInfo, // totalBoardError的提示消息
      boardSize, // 计算的板的尺寸
      inputSize, // 录入的尺寸
      boardCalcError, //识别误差
      boardSizeCheckModalVisible, // 尺寸确认框是否显示
      boardSizeHandLabelModalVisible, // 内板尺寸标注确认框
      handLabelSize, // 标注的尺寸像素,
      labelBoardSizeMm, // 标注的尺寸毫米
      cutLineCheckModalVisible, // 切线图确认框,可调整留边宽度
      calcResInfo, // 计算的结果信息
      isReturned, // 检验是否返回的标志位
      handAnnotatedModalVisble, // 切线标注框是否显示
      labelTwoBoxSizeMm, // 标注两个内板的尺寸
      labelTwoBoxSizePix, // 标注两个内板在前端显示的尺寸,根据高宽比缩放了的尺寸
      beginCheckModalVisible, // 铡刀起点检测,有一个灯管全黑的显示框
      cutterImageSrc, //铡刀提示显示的图片,
      cutterHintInfo, // 铡刀那里的提示消息.
      fontStart, // 铡刀那里的提示消息的颜色
      cutterAngleErrorModalVisible, //铡刀起点检测,角度调整之后依旧没有通过提示框.
      finalCheckModalVisible, // 铡刀终点检测,错误提示框.
      produceStartModalVisible, // 设备启动提示框
      resetModalVisible, // 设备复位提示框
      produceStartModalInfo, // 设备启动提示框的内容
      resetModalInfo, // 复位提示框的内容.
      btnResetAllClicked, // 复位按钮是否按下.
      cutLineSrc, // 切线图的图像源
      handTwoBoxesSrc, // 标注两个内板位置的图像源
      visibleDisplayStatus, //produceInfo信息提示框
      produceDisplayStatus, //produceInfo信息显示颜色
      produceInfo, //首板尺寸数据对比
      visionCheckThree, // 三拼板标注框是否显示
      handThreeBoxesSrc, // 标注三个内板位置的图像源
      labelThreeBoxSizePix, //  标注三个内板在前端显示的尺寸,根据高宽比缩放了的尺寸
      labelThreeBoxSizeMm // 标注三个内板的尺寸
    } = this.props.produce
    const {
      btnName,
      p7,
      p8,
      innerBoardAngle,
      widthAdjustValue,
      heightAdjustValue,
      cutTopEdge,
      cutLeftEdge,
      cutBottomEdge,
      cutRightEdge,
      p1,
      p2,
      p3,
      p4,
      p5,
      p6,
      upAngle,
      downAngle,
      groundAngle
    } = this.state
    const { getFieldDecorator } = this.props.form
    const {
      plcOnline,
      offlineZmcStates,
      camZmcStates,
      cbjZmcStates,
      cutterZmcStates,
      cameraGroupStates,
      autoState,
      mainAlarmInfo, // 铡刀总控制器的报警信息框
      offlineAlarmInfo, // 离线上料的报警信息框
      mainAlarmInfoVisible, // 底层报警提示框是否显示
      offlineAlarmInfoVisible, // 你先上料的提示框是否显示
      offlineMode,
      offlineRadioDefault
    } = this.props.ds
    const { totalOrders, workingOrder } = this.props.os // 工单数据
    const { Option } = Select
    const children = []
    for (let i = 0; i < totalOrders.length; i++) {
      children.push(
        <Option key={i.toString() + i}>{totalOrders[i]["order_id"]}</Option>
      )
    }
    const RadioGroup = Radio.Group

    return (
      <>
        <Row style={{ display: "flex", alignItems: "stretch" }}>
          <Col span={8}>
            <Card title="离线上料状态" style={{ height: "100%" }}>
              <Row style={{ display: "flex", alignItems: "center", fontSize: 16 }}>
                <span style={{ marginRight: 20 }}>连接</span>
                {offlineZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 15 }}>状态</span>
                {offlineZmcStates.rs ? (
                  <font style={{ color: "#FF0000" }}>急停中</font>
                ) : offlineZmcStates.run ? (
                  <font style={{ color: "green", fontWeight: "bold" }}>运行中</font>
                ) : (
                  <font style={{ color: "#112233" }}>待机中</font>
                )}
                <RadioGroup
                  onChange={this.onOfflineRadioChange}
                  style={{ marginLeft: 30 }}
                  value={offlineRadioDefault}
                >
                  <Radio
                    value="start"
                    disabled={offlineZmcStates.run || offlineZmcStates.rs}
                  >
                    启动
                  </Radio>
                  <Radio value="stop">停止</Radio>
                </RadioGroup>
                <Button
                  onClick={this.offlineReset}
                  disabled={offlineZmcStates.run}
                  style={{ marginLeft: 10 }}
                >
                  复位
                </Button>
              </Row>
              <Row
                style={{
                  marginTop: "15px",
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16
                }}
              >
                <span style={{ marginRight: 5 }}>连线模式</span>
                <RadioGroup
                  onChange={this.onOfflineModeRadioChange}
                  style={{ marginLeft: 15 }}
                  value={offlineMode}
                >
                  <Radio value="auto">自动</Radio>
                  <Radio value="manual">手动</Radio>
                </RadioGroup>
              </Row>
              <Row
                style={{
                  marginTop: "15px",
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16
                }}
              >
                <span style={{ marginRight: 5 }}>放板模式</span>
                <RadioGroup
                  onChange={this.onThrowModeRadioChange}
                  style={{ marginLeft: 15 }}
                  value={offlineZmcStates.throwMode}
                >
                  <Radio value="throw">丢板</Radio>
                  <Radio value="put">放板</Radio>
                </RadioGroup>
              </Row>
              <Row
                style={{
                  marginTop: "15px",
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16
                }}
              >
                <Button onClick={this.offlineAllowCatchBoard}>允许抓板</Button>
                <Button
                  onClick={this.offlineAllowTakeBoard}
                  style={{ marginLeft: 10 }}
                >
                  允许下料
                </Button>
                <Button
                  onClick={this.offlinePutBoardFinish}
                  style={{ marginLeft: 10 }}
                >
                  放板完成
                </Button>
                <Button
                  onClick={this.offlineHandPutBoardConfirm}
                  style={{ marginLeft: 10 }}
                >
                  手动放板
                </Button>
                {/* <Button onClick={this.offlineCarIsInPlace} style={{ marginLeft: 10 }}>
                  小车到位
                </Button> */}
              </Row>
            </Card>
          </Col>
          <Col span={8} style={{ marginLeft: 10 }}>
            <Card
              title="分板线状态"
              style={{ height: "100%" }}
              extra={
                <>
                  <Button
                    id="btnClickAuto"
                    onClick={this.clickStartProduce}
                    disabled={
                      autoState ||
                      camZmcStates.rs ||
                      camZmcStates.run ||
                      cbjZmcStates.rs ||
                      cbjZmcStates.run ||
                      cutterZmcStates.rs ||
                      cutterZmcStates.run
                    }
                  >
                    启动
                  </Button>
                  <Button
                    style={{ marginLeft: 15 }}
                    onClick={this.clickStopProduce}
                    disabled={
                      !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
                    }
                  >
                    停止
                  </Button>
                  <Button
                    style={{ marginLeft: 15 }}
                    onClick={this.clickResetAll}
                    disabled={
                      cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run
                    }
                  >
                    总复位
                  </Button>
                  <Button
                    style={{ marginLeft: 15 }}
                    onClick={this.clickResetCutterSelf}
                    disabled={!cutterZmcStates.rs || cutterZmcStates.run}
                  >
                    铡刀复位
                  </Button>
                </>
              }
            >
              <Row style={{ display: "flex", alignItems: "center", fontSize: 16 }}>
                <span style={{ marginRight: 20, width: "50px" }}>上料</span>
                {camZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 20 }}>状态</span>
                {camZmcStates.rs ? (
                  <font style={{ color: "#FF0000" }}>急停中</font>
                ) : camZmcStates.run ? (
                  <font style={{ color: "green", fontWeight: "bold" }}>运行中</font>
                ) : (
                  <font style={{ color: "#112233" }}>待机中</font>
                )}

                <span style={{ marginLeft: 50, width: "60px" }}>左相机</span>
                {cameraGroupStates[0] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginLeft: 50, width: "100px" }}>铡刀1号相机</span>
                {cameraGroupStates[3] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 15
                }}
              >
                <span style={{ marginRight: 20, width: "50px" }}>裁切</span>
                {cbjZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 20 }}>状态</span>
                {camZmcStates.rs ? (
                  <font style={{ color: "#FF0000" }}>急停中</font>
                ) : camZmcStates.run ? (
                  <font style={{ color: "green", fontWeight: "bold" }}>运行中</font>
                ) : (
                  <font style={{ color: "#112233" }}>待机中</font>
                )}
                <span style={{ marginLeft: 50, width: "60px" }}>中相机</span>
                {cameraGroupStates[1] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginLeft: 50, width: "100px" }}>铡刀2号相机</span>
                {cameraGroupStates[4] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 15
                }}
              >
                <span style={{ marginRight: 20, width: "50px" }}>铡刀</span>
                {cutterZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 20 }}>状态</span>
                {cutterZmcStates.rs ? (
                  <font style={{ color: "#FF0000" }}>急停中</font>
                ) : cutterZmcStates.run ? (
                  <font style={{ color: "green", fontWeight: "bold" }}>运行中</font>
                ) : (
                  <font style={{ color: "#112233" }}>待机中</font>
                )}
                <span style={{ marginLeft: 50, width: "60px" }}>右相机</span>
                {cameraGroupStates[2] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 15
                }}
              >
                <span style={{ marginRight: 20, width: "50px" }}>收板机</span>
                {plcOnline ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
            </Card>
          </Col>
          <Col span={8} style={{ marginLeft: 10 }}>
            <Card title="生产信息" style={{ height: "100%", width: "96.9%" }}>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 10
                }}
              >
                <span style={{ width: "75px" }}>
                  <font style={{ color: "#333" }}>生产工单</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>
                    {workingInfo.order_used_id}
                  </font>
                </span>
                <span style={{ width: "75px", marginLeft: 10 }}>
                  <font style={{ color: "#333" }}>产量</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>{workingInfo.cut_amount}</font>
                </span>
                <Popconfirm
                  title="确定要清零吗?"
                  onConfirm={this.resetCutAmount}
                  cancelText="取消"
                  okText="确定"
                >
                  <Button type="danger" style={{ marginLeft: 15, width: "80px" }}>
                    产量清零
                  </Button>
                </Popconfirm>
              </Row>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 10
                }}
              >
                <span style={{ width: "75px" }}>
                  <font style={{ color: "#333" }}>切割速度</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>
                    {workingInfo.cut_speed} mm/s
                  </font>
                </span>
                <span style={{ width: "75px", marginLeft: 10 }}>
                  <font style={{ color: "#333" }}>刀已使用</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>
                    {workingInfo.knife_used} 米
                  </font>
                </span>
                <Popconfirm
                  title="确定要清零吗?"
                  onConfirm={this.resetCutLife}
                  cancelText="取消"
                  okText="确定"
                >
                  <Button type="danger" style={{ marginLeft: 15, width: "80px" }}>
                    刀清零
                  </Button>
                </Popconfirm>
              </Row>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 10
                }}
              >
                <span style={{ width: "75px" }}>
                  <font style={{ color: "#333" }}>下刀深度</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>{workingInfo.cut_deep} mm</font>
                </span>
                <span style={{ width: "75px", marginLeft: 10 }}>
                  <font style={{ color: "#333" }}>台布已用</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>
                    {workingInfo.table_used} 天
                  </font>
                </span>
                <Popconfirm
                  title="确定要清零吗?"
                  onConfirm={this.resetTableLife}
                  cancelText="取消"
                  okText="确定"
                >
                  <Button type="danger" style={{ marginLeft: 15 }}>
                    台布清零
                  </Button>
                </Popconfirm>
              </Row>
              <Row
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 16,
                  marginTop: 10
                }}
              >
                <span style={{ width: "75px" }}>
                  <font style={{ color: "#333" }}>拖拽速度</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>
                    {workingInfo.drag_speed} mm/s
                  </font>
                </span>
                <span style={{ width: "75px", marginLeft: 10 }}>
                  <font style={{ color: "#333" }}>裁切面积</font>
                </span>
                <span style={{ marginLeft: 10, width: "120px" }}>
                  <font style={{ color: "#008B45" }}>
                    {workingInfo.cut_areas} mm²
                  </font>
                </span>
              </Row>
            </Card>
          </Col>
        </Row>
        <Card
          title="工单管理"
          style={{ marginTop: 5 }}
          extra={
            <>
              <div style={{ marginRight: 800 }}>
                <span style={{ marginRight: 5 }}>输入工单Id:</span>
                <Select
                  showSearch
                  style={{ width: 200 }}
                  optionFilterProp="children"
                  onChange={this.onChange}
                  filterOption={(input, option) =>
                    option.props.children
                      .toLowerCase()
                      .indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {children}
                </Select>
                <Button
                  onClick={this.clickSearch}
                  style={{ marginLeft: 15, marginRight: 15 }}
                >
                  搜索
                </Button>
                <Button onClick={this.clickHistory}>历史记录</Button>
                <Button style={{ marginLeft: 15 }} onClick={this.reCalcFirstBoard}>
                  重新做首板
                </Button>
                <Button
                  style={{ marginLeft: 15 }}
                  onClick={this.changeOrder}
                  disabled={
                    !autoState &&
                    !cbjZmcStates.run &&
                    !camZmcStates.run &&
                    !cutterZmcStates.run
                  }
                >
                  更换工单
                </Button>
                <Button style={{ marginLeft: 100 }} onClick={this.disableCalcImage}>
                  {btnName}
                </Button>
              </div>
            </>
          }
        >
          <OrderForm order={workingOrder} />
        </Card>
        <Card
          title="识别信息"
          extra={
            <>
              {/* <Button onClick={this.testNewFunction} style={{marginLeft:20}}>测试新功能 </Button> */}
            </>
          }
        >
          <ProdBoardDataForm prodBoardData={prodBoardData} />
        </Card>
        <Modal
          title={"作业过程中通信异常提示框"}
          visible={errorInfoModalVisble}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeErrorInfoModal}
          footer={[
            <Button key="1" onClick={this.closeErrorInfoModal}>
              关闭提示框
            </Button>,
            <Button
              key="2"
              onClick={this.clickStopProduce}
              style={{ marginLeft: 15 }}
            >
              停止
            </Button>,
            <Button
              key="3"
              onClick={this.clickResetAll}
              style={{ marginLeft: 15 }}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>
          ]}
        >
          <p>{errorInfo}</p>
        </Modal>
        <Modal
          title={
            <font style={{ color: "#FF0000", fontSize: 16 }}>
              物料检测未通过提示框{" "}
            </font>
          }
          visible={totalBoardErrorModalVisible}
          width={window.screen.availWidth - 50}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
          // closable={false}
        >
          <Card>
            <Card.Grid style={{ width: "70%", textAlign: "left" }}>
              <Stage width={1250} height={1600}>
                <Layer>
                  {totalBoardSrc ? <TotalBoardImage /> : <Image width={900} />}
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "30%", textAlign: "left" }}>
              <Row>
                <p>
                  {
                    <font style={{ color: "#FF0000", fontSize: 16 }}>
                      提示消息:{" "}
                    </font>
                  }
                </p>
                <span>{totalBoardErrorInfo}</span>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.boardBack}>板回退</Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.totalBoardIsOk}>人工确认物料OK</Button>
                <Button
                  onClick={this.openTotalBoardErrorDir}
                  style={{ marginLeft: 20 }}
                >
                  查看图片目录
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={
            <font style={{ color: "#FF0000", fontSize: 16 }}>
              首片内板尺寸确认框{" "}
            </font>
          }
          visible={boardSizeCheckModalVisible}
          width={window.screen.availWidth - 50}
          style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
          footer={null}
          closable={false}
        >
          <Card>
            <Card.Grid style={{ width: "75%", textAlign: "left" }}>
              <Stage width={1300} height={880}>
                <Layer>
                  {totalBoardSrc ? <TotalBoardImage /> : <Image width={1200} />}
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "25%", textAlign: "left" }}>
              <h3>
                <font style={{ color: "#FF0000", fontWeight: "bold", fontSize: 18 }}>
                  重要步骤,一定要好好确认!!!!!!
                </font>
              </h3>
              <p>
                <font style={{ color: "#FF0000", fontWeight: "bold", fontSize: 18 }}>
                  请确认识别的绿色框是否是正确的内板区域
                </font>
              </p>
              <p>
                录入尺寸:&nbsp;&nbsp; (宽,高) = ({inputSize[0]},&nbsp;{inputSize[1]})
              </p>
              <p>
                识别尺寸:&nbsp;&nbsp; (宽,高) = ({boardSize[0]},&nbsp;{boardSize[1]})
              </p>
              <p>
                识别误差:&nbsp;&nbsp; (宽,高) = ({boardCalcError[0]},&nbsp;
                {boardCalcError[1]})
              </p>
              <Row>
                <Button type="primary" onClick={this.keepOkSize}>
                  识别OK
                </Button>
                <Button
                  style={{ marginLeft: 20 }}
                  type="primary"
                  onClick={this.nextBoardRes}
                >
                  识别NG
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button type="primary" onClick={this.lastBoardRes}>
                  上一个
                </Button>
                <Button
                  type="primary"
                  style={{ marginLeft: 20 }}
                  onClick={this.handInnerBoardSize}
                >
                  人工标注内板尺寸
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={"首板内板尺寸误差确认框"}
          visible={visibleDisplayStatus}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeResetModal}
          footer={[
            <Button key="1" onClick={this.handDisplayStatus}>
              继续作业
            </Button>,
            <Button
              key="3"
              style={{ marginLeft: 8 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState &&
                !cbjZmcStates.run &&
                !camZmcStates.run &&
                !cutterZmcStates.run
              }
            >
              停止
            </Button>,

            <Button
              key="2"
              style={{ marginLeft: 8 }}
              onClick={this.clickResetAll}
              disabled={
                cbjZmcStates.run ||
                camZmcStates.run ||
                cutterZmcStates.run ||
                btnResetAllClicked
              }
            >
              总复位
            </Button>
          ]}
        >
          <p>
            {produceDisplayStatus ? (
              <font style={{ color: "#FF0000", fontSize: 20 }}>{produceInfo}</font>
            ) : (
              <font style={{ color: "#000000", fontSize: 20 }}>{produceInfo}</font>
            )}
          </p>
        </Modal>
        <Modal
          title={"内板尺寸人工标注框"}
          visible={boardSizeHandLabelModalVisible}
          width={window.screen.availWidth - 50}
          closable={false}
          footer={null}
          style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <Card>
            <Card.Grid style={{ width: "70%" }}>
              <Stage width={1250} height={880}>
                <Layer>
                  {totalBoardSrc ? <TotalBoardImage /> : <Image width={900} />}
                  <Rect
                    width={handLabelSize[0]}
                    height={handLabelSize[1]}
                    strokeWidth={2}
                    stroke={"#dfe333"}
                    x={p7.x}
                    y={p7.y}
                    rotation={innerBoardAngle}
                  />
                  <HandLabel
                    x={30}
                    y={30}
                    key="p7"
                    name="左上角"
                    callBack={(x, y) => {
                      this.setState({ p7: { ...p7, x: x, y: y } })
                    }}
                  />
                  <HandLabel
                    x={300}
                    y={300}
                    key="p8"
                    name="内框旋转,向下顺时针,向上逆时针"
                    callBack={(x, y) => {
                      this.setState({ innerBoardAngle: (y - p8.y) / 20 })
                    }}
                  />
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "30%" }}>
              <div style={{ marginLeft: 16, marginRight: 16 }}>
                宽度调整
                <Slider
                  value={widthAdjustValue}
                  max={20}
                  min={-20}
                  onChange={(value) => this.changeWidthValue(value)}
                  onAfterChange={this.onAfterSizeChange}
                />
              </div>
              <div style={{ marginLeft: 16, marginRight: 16 }}>
                高度调整
                <Slider
                  value={heightAdjustValue}
                  max={20}
                  min={-20}
                  onChange={(value) => this.changeHeightValue(value)}
                  onAfterChange={this.onAfterSizeChange}
                />
              </div>
              <span style={{ marginLeft: 16, marginRight: 20, marginTop: 30 }}>
                <font style={{ color: "#0000FF", fontSize: 16 }}>
                  标注尺寸:&nbsp;&nbsp;
                </font>
                (宽,高) = ({labelBoardSizeMm[0]},&nbsp;{labelBoardSizeMm[1]})
              </span>
              <div style={{ marginLeft: 16, marginRight: 16, marginTop: 20 }}>
                <Button onClick={this.handInnerBoardSizeIsOk}>标注内板尺寸OK</Button>
              </div>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={"切线图调整确认框"}
          visible={cutLineCheckModalVisible}
          width={window.screen.availWidth - 50}
          closable={false}
          footer={null}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <Card>
            <Card.Grid style={{ width: "65%" }}>
              <Stage width={1250} height={1600}>
                <Layer>
                  {cutLineSrc ? <CutLineImage /> : <Image width={900} />}
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "35%", marginTop: 500 }}>
              <Row>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第一刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutTopEdge}
                    max={45}
                    min={0}
                    onChange={(value) => this.setState({ cutTopEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第二刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutLeftEdge}
                    max={45}
                    min={0}
                    onChange={(value) => this.setState({ cutLeftEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第三刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutBottomEdge}
                    max={45}
                    min={0}
                    onChange={(value) => this.setState({ cutBottomEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第四刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutRightEdge}
                    max={45}
                    min={0}
                    onChange={(value) => this.setState({ cutRightEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <span style={{ marginLeft: 16, marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: "#0000FF", fontSize: 16 }}>
                    识别信息:&nbsp;&nbsp;
                  </font>
                  {calcResInfo}
                </span>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.clickCutBoard}>切板</Button>
                <Button onClick={this.boardBack} style={{ marginLeft: 20 }}>
                  板回退
                </Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
                <Button
                  onClick={this.reHandLabelTwoBoxes}
                  style={{ marginLeft: 20 }}
                >
                  重新标注
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={"内板位置标注框"}
          visible={handAnnotatedModalVisble}
          width={window.screen.availWidth - 50}
          closable={false}
          footer={null}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <Card>
            <Card.Grid style={{ width: "65%" }}>
              <Stage width={1250} height={1500}>
                <Layer>
                  {handTwoBoxesSrc ? <TwoBoxesHandImage /> : <Image width={1000} />}
                  <Rect
                    width={labelTwoBoxSizePix[0]}
                    height={labelTwoBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={"#dfe333"}
                    x={p1.x}
                    y={p1.y}
                    rotation={upAngle}
                  />
                  <Rect
                    width={labelTwoBoxSizePix[0]}
                    height={labelTwoBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={"#dfe333"}
                    x={p3.x}
                    y={p3.y}
                    rotation={downAngle}
                  />

                  <PLable
                    x={p1.x}
                    y={p1.y}
                    key="p1"
                    name="1号左上角"
                    callBack={(x, y) => {
                      this.setState({ p1: { ...p1, x: x, y: y } })
                    }}
                  />
                  <PLable
                    x={250}
                    y={250}
                    key="p2"
                    name="1号旋转向下顺时针"
                    callBack={(x, y) => {
                      this.setState({ upAngle: (y - p2.y) / 20 })
                    }}
                  />
                  <PLable
                    x={50}
                    y={600}
                    key="p3"
                    name="2号左上角"
                    callBack={(x, y) => {
                      this.setState({ p3: { ...p3, x: x, y: y } })
                    }}
                  />
                  <PLable
                    x={250}
                    y={650}
                    key="p4"
                    name="2号旋转"
                    callBack={(x, y) => {
                      this.setState({ downAngle: (y - p4.y) / 20 })
                    }}
                  />
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "35%", marginTop: 500 }}>
              <Row style={{ marginLeft: 16, marginRight: 16 }}>
                <div>
                  宽度调整
                  <Slider
                    value={widthAdjustValue}
                    max={20}
                    min={-20}
                    onChange={(value) => this.changeWidthValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <div>
                  高度调整
                  <Slider
                    value={heightAdjustValue}
                    max={20}
                    min={-20}
                    onChange={(value) => this.changeHeightValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: "#0000FF", fontSize: 16 }}>
                    标注尺寸:&nbsp;&nbsp;
                  </font>
                  (宽,高) = ({labelTwoBoxSizeMm[0]},&nbsp;{labelTwoBoxSizeMm[1]})
                </span>
              </Row>
              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: "#0000FF", fontSize: 16 }}>
                    识别信息:&nbsp;&nbsp;
                  </font>
                  {calcResInfo}
                </span>
              </Row>

              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <Button onClick={this.handLabelTwoBoxes}>标注</Button>
                <Button onClick={this.boardBack} style={{ marginLeft: 20 }}>
                  板回退
                </Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={"铡刀起点检测错误提示框"}
          visible={beginCheckModalVisible}
          width={window.screen.availWidth - 80}
          style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
        >
          <Card>
            <Card.Grid style={{ width: "70%", textAlign: "left" }}>
              <Stage width={1000} height={880}>
                <Layer>
                  {cutterImageSrc ? <CutterCamCalImage /> : <Image width={800} />}
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "30%", textAlign: "left" }}>
              <Row>
                <p>
                  {
                    <font style={{ color: "#FF0000", fontSize: 16 }}>
                      提示消息:{" "}
                    </font>
                  }
                </p>
                <span>{cutterHintInfo}</span>
              </Row>
              <Row style={{ marginTop: 30 }}>
                <Button onClick={this.cutterBeginCheckPass}>人工确认检测通过</Button>
                <Button
                  style={{ marginLeft: 20 }}
                  onClick={this.cutterBeginCheckAgain}
                >
                  重新检测
                </Button>
                <Button
                  style={{ marginLeft: 20 }}
                  onClick={this.openCutterBeginCheckDir}
                >
                  查看原图
                </Button>
                <Button
                  style={{ marginLeft: 20 }}
                  onClick={this.openCutterCheckResDir}
                >
                  查看结果图
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={"铡刀终点检测出错提示框"}
          visible={finalCheckModalVisible}
          width={window.screen.availWidth - 80}
          style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
        >
          <Card>
            <Card.Grid style={{ width: "70%", textAlign: "left" }}>
              <Stage width={1000} height={880}>
                <Layer>
                  {cutterImageSrc ? <CutterCamCalImage /> : <Image width={800} />}
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "30%", textAlign: "left" }}>
              <Row>
                <p>
                  {
                    <font style={{ color: "#FF0000", fontSize: 16 }}>
                      提示消息:{" "}
                    </font>
                  }
                </p>
                、
                <p>
                  {fontStart ? (
                    <font style={{ color: "#FF0000", fontSize: 20 }}>
                      {cutterHintInfo}
                    </font>
                  ) : (
                    <font style={{ color: "#000000" }}>{cutterHintInfo}</font>
                  )}
                </p>
                {/* <span>{cutterHintInfo}</span> */}
              </Row>
              <Row style={{ marginTop: 30 }}>
                <Button onClick={this.cutterFinalCheckAgain}>重新检测</Button>
                <Button
                  onClick={this.cutterFinalCutBoard}
                  style={{ marginLeft: 20 }}
                >
                  人工确认铡板
                </Button>
                <Button
                  style={{ marginLeft: 20 }}
                  onClick={this.openCutterFinalCheckDir}
                >
                  查看原图
                </Button>
                <Button
                  style={{ marginLeft: 20 }}
                  onClick={this.openCutterFinalResDir}
                >
                  查看结果图
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={"设备启动提示框"}
          visible={produceStartModalVisible}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeProduceStartModal}
          footer={[
            <Button key="1" type="primary" onClick={this.closeProduceStartModal}>
              关闭启动提示框
            </Button>,
            <Button
              key="2"
              style={{ marginLeft: 15 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState &&
                !cbjZmcStates.run &&
                !camZmcStates.run &&
                !cutterZmcStates.run
              }
            >
              停止
            </Button>,

            <Button
              key="3"
              style={{ marginLeft: 15 }}
              onClick={this.clickReset}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>
          ]}
        >
          <p>{produceStartModalInfo}</p>
        </Modal>
        <Modal
          title={"复位提示框"}
          visible={resetModalVisible}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeResetModal}
          footer={[
            <Button key="1" onClick={this.closeResetModal}>
              关闭复位提示框
            </Button>,
            <Button
              key="3"
              style={{ marginLeft: 8 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState &&
                !cbjZmcStates.run &&
                !camZmcStates.run &&
                !cutterZmcStates.run
              }
            >
              停止
            </Button>,

            <Button
              key="2"
              style={{ marginLeft: 8 }}
              onClick={this.clickResetAll}
              disabled={
                cbjZmcStates.run ||
                camZmcStates.run ||
                cutterZmcStates.run ||
                btnResetAllClicked
              }
            >
              总复位
            </Button>
          ]}
        >
          <p>{resetModalInfo}</p>
        </Modal>
        <Modal
          title={"底层报警信息提示框"}
          visible={mainAlarmInfoVisible}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeMainAlarmInfoModal}
          footer={[
            <Button key="1" onClick={this.closeMainAlarmInfoModal}>
              关闭底层报警提示提示框
            </Button>,

            <Button
              key="2"
              style={{ marginLeft: 15 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState &&
                !cbjZmcStates.run &&
                !camZmcStates.run &&
                !cutterZmcStates.run
              }
            >
              停止
            </Button>,
            <Button
              key="3"
              style={{ marginLeft: 15 }}
              onClick={this.clickResetAll}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>,
            <Button
              key="4"
              style={{ marginLeft: 15 }}
              onClick={this.clickResetCutterSelf}
              disabled={!cutterZmcStates.rs && cutterZmcStates.run}
            >
              铡刀复位
            </Button>
          ]}
        >
          <p>{mainAlarmInfo}</p>
        </Modal>
        <Modal
          title={"三拼板标注框"}
          visible={visionCheckThree}
          width={window.screen.availWidth - 420}
          closable={false}
          footer={[]}
        >
          <Card>
            <Card.Grid style={{ width: "65%" }}>
              <Stage width={1200} height={1500}>
                <Layer>
                  {handThreeBoxesSrc ? (
                    <BoardImage width={800} />
                  ) : (
                    <Image width={800} />
                  )}
                  <Rect
                    width={labelThreeBoxSizePix[0]}
                    height={labelThreeBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={"#dfe333"}
                    x={p1.x}
                    y={p1.y}
                    rotation={upAngle}
                  />
                  <Rect
                    width={labelThreeBoxSizePix[0]}
                    height={labelThreeBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={"#dfe333"}
                    x={p3.x}
                    y={p3.y}
                    rotation={downAngle}
                  />
                  <Rect
                    width={labelThreeBoxSizePix[0]}
                    height={labelThreeBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={"#dfe333"}
                    x={p5.x}
                    y={p5.y}
                    rotation={groundAngle}
                  />

                  <PLable
                    x={50}
                    y={100}
                    key="p1"
                    name="1号左上角"
                    callBack={(x, y) => {
                      this.setState({ p1: { ...p1, x: x, y: y } })
                    }}
                  />
                  <PLable
                    x={250}
                    y={250}
                    key="p2"
                    name="1号旋转向下顺时针"
                    callBack={(x, y) => {
                      this.setState({ up_angle: (y - p2.y) / 20 })
                    }}
                  />
                  <PLable
                    x={50}
                    y={600}
                    key="p3"
                    name="2号左上角"
                    callBack={(x, y) => {
                      this.setState({ p3: { ...p3, x: x, y: y } })
                    }}
                  />
                  <PLable
                    x={250}
                    y={650}
                    key="p4"
                    name="2号旋转"
                    callBack={(x, y) => {
                      this.setState({ down_angle: (y - p4.y) / 20 })
                    }}
                  />
                  <PLable
                    x={50}
                    y={900}
                    key="p5"
                    name="3号左上角"
                    callBack={(x, y) => {
                      this.setState({ p5: { ...p5, x: x, y: y } })
                    }}
                  />
                  <PLable
                    x={250}
                    y={1050}
                    key="p6"
                    name="3号旋转"
                    callBack={(x, y) => {
                      this.setState({ ground_angle: (y - p6.y) / 20 })
                    }}
                  />
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: "35%", marginTop: 500 }}>
              <Row style={{ marginLeft: 16, marginRight: 16 }}>
                <div>
                  宽度调整
                  <Slider
                    value={widthAdjustValue}
                    max={20}
                    min={-20}
                    onChange={(value) => this.changeWidthValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <div>
                  高度调整
                  <Slider
                    value={heightAdjustValue}
                    max={20}
                    min={-20}
                    onChange={(value) => this.changeHeightValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: "#0000FF", fontSize: 16 }}>
                    标注尺寸:&nbsp;&nbsp;
                  </font>
                  (宽,高) = ({labelThreeBoxSizeMm[0]},&nbsp;{labelThreeBoxSizeMm[1]})
                </span>
              </Row>
              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: "#0000FF", fontSize: 16 }}>
                    识别信息:&nbsp;&nbsp;
                  </font>
                  {calcResInfo}
                </span>
              </Row>
              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <Button onClick={this.handLabelThreel}>标注</Button>
                <Button onClick={this.boardBack} style={{ marginLeft: 20 }}>
                  板回退
                </Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
      </>
    )
  }
}

export default Produce
